<template>
    <div class="login_container">
        <!-- v-model:控制对话框显示与隐藏，title:对话框左上角标题 -->
        <el-dialog v-model="userStore.visiable" title="用户登录">
            <!-- 对话框身体部分(使用 element UI 的 Layout 布局) -->
            <el-row>
                <!-- 左侧结构：登录 -->
                <el-col :span="12">
                    <div class="login">
                        <!-- 手机登录界面 -->
                        <div v-show="phoneFlag">
                            <!-- 进行表单验证的属性和验证的规则 -->
                            <el-form :model="loginParam" :rules="rules" ref="form">
                                <el-form-item prop="phone">
                                    <el-input clearable v-model="loginParam.phone" :prefix-icon="User"
                                        placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input v-model="loginParam.code" :prefix-icon="Lock"
                                        placeholder="请输入手机验证码"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <!-- disabled 为真时禁用按钮 -->
                                    <el-button :disabled="!isPhone || showCount" @click="getCode">
                                        <span v-if="!showCount">获取验证码</span>
                                        <CountDown @closeShowCount="closeShowCount" v-else />
                                    </el-button>
                                </el-form-item>
                            </el-form>
                            <div class="bottom">
                                <el-button @click="userLogin" style="width: 90%;" type="primary">用户登录</el-button>
                                <p @click="changeFlag">微信扫码登录</p>
                                <svg @click="changeFlag" t="1698931351003" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" width="32" height="32">
                                    <path
                                        d="M512 1024C229.23 1024 0 794.77 0 512S229.23 0 512 0s512 229.23 512 512-229.23 512-512 512z m107.91-626.371H640c-20.09-94.744-115.566-162.962-225.304-162.962-124.002 0-222.696 86.04-222.696 198.607 0 65.097 34.572 115.492 89.43 156.94l-23.114 71.12 77.995-41.448a354.748 354.748 0 0 0 77.97 11.8h20.114a133.608 133.608 0 0 1-5.851-47.47 193.122 193.122 0 0 1 57.466-134.412 181.37 181.37 0 0 1 133.096-52.175h0.804z m-115.273-56.296c15.848 0 28.696 14.288 28.696 31.915s-12.848 31.915-28.696 31.915c-17.652 1.95-33.402-12.313-35.304-31.94 0-22.284 17.457-31.89 34.719-31.89h0.585z m-171.032 63.878c-17.555 1.463-33.012-12.653-34.938-31.89 1.926-19.212 17.383-33.329 34.938-31.89 16.042 0 29.062 14.287 29.062 31.915 0 17.603-13.02 31.89-29.062 31.89zM832 574.805c0-92.233-90.136-169.472-192-169.472-107.764 0-192 77.24-192 169.448 0 92.257 84.456 169.496 192 169.496a264.24 264.24 0 0 0 66.828-11.873L767.586 768l-17.408-59.538c49.42-35.596 81.017-83.286 81.017-133.852l0.805 0.195zM573.562 554.52c-10.435 0-18.895-9.484-18.895-21.187s8.46-21.211 18.895-21.211c11.727-1.39 22.308 7.997 23.771 21.114-1.39 13.214-11.97 22.698-23.771 21.284z m128 0.098c-10.435 0-18.895-9.509-18.895-21.212 0-11.751 8.46-21.26 18.895-21.26 11.727-1.414 22.308 7.997 23.771 21.139-2.194 12.921-12.58 22.04-24.259 21.333h0.488z"
                                        fill="#0ABC64" p-id="2380"></path>
                                </svg>
                            </div>
                        </div>
                        <!-- 微信扫码登陆界面 -->
                        <div class="wechat" v-show="!phoneFlag">
                            <!-- 在这个容器中显示微信扫码登录页面 -->
                            <div id="login_container"></div>
                            <!-- 切换手机验证码登录 -->
                            <div class="changePhone">
                                <p @click="phoneFlag = true">手机短信验证码登录</p>
                                <svg @click="phoneFlag = true" t="1699102914380" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6447" width="32" height="32">
                                    <path
                                        d="M362.789 279.893h317.927V690.47H362.79z m118.979-19.504h66.316c3.413 0 6.826-2.926 6.826-6.827v-6.827c0-3.413-2.925-6.826-6.826-6.826h-66.316c-3.414 0-6.827 2.925-6.827 6.826v6.827c0.488 3.9 3.413 6.827 6.827 6.827z m39.984 456.899a26.222 26.222 0 0 0-26.331 26.331 26.222 26.222 0 0 0 26.331 26.331 26.222 26.222 0 0 0 26.332-26.331c0-14.14-11.703-26.331-26.332-26.331z"
                                        fill="#d81e06" p-id="6448"></path>
                                    <path
                                        d="M512 24.381C242.834 24.381 24.381 242.834 24.381 512S242.834 999.619 512 999.619 999.619 781.166 999.619 512 781.166 24.381 512 24.381z m208.701 746.057c0 21.943-18.042 39.985-39.985 39.985H362.79c-21.943 0-39.985-18.042-39.985-39.985V253.562c0-21.943 18.042-39.985 39.985-39.985h317.927c21.943 0 39.985 18.042 39.985 39.985v516.876z"
                                        fill="#d81e06" p-id="6449"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <!-- 右侧结构：关注 -->
                <el-col :span="12">
                    <div class="right">
                        <div class="top">
                            <div class="item">
                                <img src="@/assets/images/code_app.png" alt="">
                                <svg t="1698931947494" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2637" width="16" height="16">
                                    <path
                                        d="M711.9744 335.6032c5.19424 0 10.28992 0.09728 15.38816 0.34176C700.40704 189.1712 548.79616 76.8 365.80608 76.8 163.75552 76.8 0 213.7728 0 382.74688 0 481.8112 56.28416 569.90208 143.58656 625.792c1.12896 0.7104 3.35744 2.10816 3.35744 2.10816l-35.35616 110.73024 132.2432-67.36c0 0 4.13952 1.19936 6.22208 1.78944 36.36224 10.11968 75.29856 15.6096 115.75296 15.6096 8.25728 0 16.4416-0.31872 24.57728-0.76032-7.49696-23.25504-11.61472-47.73376-11.61472-72.99584C378.76864 460.66432 527.9936 335.6032 711.9744 335.6032zM493.09952 227.64032c28.37504 0 51.3344 22.24896 51.3344 49.74336 0 27.44192-22.95808 49.7408-51.3344 49.7408-28.39808 0-51.35616-22.29888-51.35616-49.7408C441.74208 249.88928 464.70144 227.64032 493.09952 227.64032zM238.51136 327.12448c-28.37248 0-51.35616-22.29888-51.35616-49.7408 0-27.4944 22.98368-49.74336 51.35616-49.74336 28.40064 0 51.40992 22.24896 51.40992 49.74336C289.92128 304.8256 266.912 327.12448 238.51136 327.12448z"
                                        fill="#969696" p-id="2638"></path>
                                    <path
                                        d="M405.67424 616.72704c0 142.75328 138.39232 258.48192 309.09312 258.48192 34.1568 0 67.04128-4.65408 97.76768-13.23008 1.76384-0.4672 5.24416-1.52064 5.24416-1.52064l111.68384 56.9472-29.8432-93.5552c0 0 1.91232-1.19936 2.84288-1.78688 73.70496-47.2192 121.29024-121.60896 121.29024-205.33632 0-142.73152-138.34496-258.43456-308.9856-258.43456C544.06656 358.29248 405.67424 473.99552 405.67424 616.72704zM778.8672 527.7056c0-23.17952 19.40608-41.97248 43.37024-41.97248 24.0128 0 43.42016 18.79296 43.42016 41.97248 0 23.22944-19.40864 42.048-43.42016 42.048C798.27328 569.7536 778.8672 550.93504 778.8672 527.7056zM563.79136 527.7056c0-23.17952 19.4304-41.97248 43.39456-41.97248 23.98976 0 43.42016 18.79296 43.42016 41.97248 0 23.22944-19.4304 42.048-43.42016 42.048C583.22176 569.7536 563.79136 550.93504 563.79136 527.7056z"
                                        fill="#969696" p-id="2639"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>"快速预约挂号"</p>
                            </div>
                            <div class="item">
                                <img src="@/assets/images/code_login_wechat.png" alt="">
                                <svg t="1698932297082" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="3771" width="16" height="16">
                                    <path
                                        d="M736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837V177.632653c0-45.97551 37.616327-83.591837 83.591837-83.591837h449.306122c45.97551 0 83.591837 37.616327 83.591837 83.591837v668.734694c0 45.97551-37.616327 83.591837-83.591837 83.591837zM287.346939 135.836735c-22.987755 0-41.795918 18.808163-41.795919 41.795918v668.734694c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918V177.632653c0-22.987755-18.808163-41.795918-41.795919-41.795918H287.346939z"
                                        fill="#333333" p-id="3772"></path>
                                    <path
                                        d="M616.489796 815.020408H407.510204c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                                        fill="#333333" p-id="3773"></path>
                                </svg>
                                <p>扫一扫下载</p>
                                <p>"预约挂号"APP</p>
                            </div>
                        </div>
                        <div class="content">
                            <p>尚医通官方指定平台</p>
                            <p>快速挂号 安全放心</p>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!-- 底部的具名插槽 -->
            <template #footer>
                <el-button @click="closeLogin" color="red">关闭窗口</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
defineOptions({
    name: "Login"
})
// 引入组合式 api 
import { ref, reactive, computed, watch } from "vue"
// 引入 user 仓库
import useUserStore from '@/store/modules/user'
// 引入图标
import { User, Lock } from '@element-plus/icons-vue'
// 引入获取用户信息的接口
import { reqUserCode, reqWxLogin } from "@/api/user"
// 引入接口返回数据类型
import { UserCodeData, WxLoginData } from "@/api/user/type"
// 引入倒计时组件
import CountDown from "@/components/countdown/index.vue"
// 导入 Element 组件
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from "vue-router";


/* 数据 */
// 接收仓库数据
let userStore = useUserStore();
// 标记是否显示手机号登陆
let phoneFlag = ref<boolean>(true);
// 收集表单数据
const loginParam = reactive({
    phone: '',
    code: ''
})
// 计算出当前表单元素收集的内容是否是手机号码
let isPhone = computed(() => {
    // 手机号码的正则表达式
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    return reg.test(loginParam.phone)
})
// 定义一个响应式数据显示倒计时组件
let showCount = ref<boolean>(false)
// 获取 form 组件
let form = ref<any>()
// 表单验证的规则
const rules = {
    /* 默认校验 */
    // phone: [
    //     {
    //         // 是否必须
    //         required: true,
    //         message: "手机号不能为空",
    //         trigger: "blur"
    //     },
    //     {
    //         // 文本长度
    //         len: 11,
    //         message: "手机号的长度应为 11 位",
    //         trigger: "blur"
    //     },
    //     {
    //         pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
    //         message: "请输入正确的手机号",
    //         trigger: "blur"
    //     }
    // ],
    // code: [
    //     {
    //         required: true,
    //         message: "验证码不能为空"
    //     },
    //     {
    //         len: 6,
    //         message: "验证码的长度应为 6 位",
    //         trigger: "blur"
    //     }
    // ]

    /* 自定义校验 */
    phone: [{ validator: validatorPhone, trigger: "blur" }],
    code: [{ validator: validatorCode, trigger: "blur" }]
}
// 实例化路由
const route = useRoute()
const router = useRouter()


/* 方法 */
// 点击右下角关闭按钮时触发
const closeLogin = () => {
    userStore.visiable = !userStore.visiable
}
// 点击切换微信登录时触发，改变 phoneFlag 状态
const changeFlag = async () => {
    // 切换登录场景
    phoneFlag.value = !phoneFlag.value
    // 创建一个常量保存当前的域名(http://localhost:5173)
    const redirect_URI = encodeURIComponent(window.location.origin + "/wxlogin");
    // 发送获取用户微信登录参数的请求
    let result: WxLoginData = await reqWxLogin(redirect_URI)
    if (result.code === 200) {
        // 生成微信扫码登录二维码界面
        // https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
        // @ts-ignore
        new WxLogin({
            self_redirect: true,
            id: "login_container",
            appid: result.data.appid,
            scope: result.data.scope,
            redirect_uri: result.data.redirectUri,
            state: result.data.state,
            style: "balck",
            href: ""
        });
    }
}
// 改变相应数据状态，获取验证码
const getCode = async () => {
    showCount.value = true
    let result: UserCodeData = await reqUserCode(loginParam.phone)
    if (result.code === 200) {
        loginParam.code = result.data
    }
}
// 计数器子组件绑定的自定义事件
// 改变 showCount 状态，不显示倒计时
const closeShowCount = () => {
    showCount.value = false
}
// 点击用户登录按钮的回调
const userLogin = async () => {
    // 等待表单校验成功
    await form.value.validate();
    // 通知 userStore 发送登录请求
    try {
        // 等待用户登录接口返回成功的数据
        await userStore.sendLoginParam(loginParam);
        // 关闭对话框
        userStore.visiable = false
        // 获取url的query参数
        let redirect = route.query.redirect
        // 如果携带了路由参数
        if (redirect) {
            // 此处传递的参数是整体的 path&query 需要直接传
            router.push(redirect as string)
        }
    } catch (error) {
        // 如果登陆失败，弹出对话框
        ElMessage({
            type: "error",
            message: (error as Error).message
        })
    }
}
// 定义手机号的校验方法
function validatorPhone(_rule: any, value: any, callback: any) {
    if (!value) {
        return callback(new Error('手机号不能为空'))
    }
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    if (reg.test(value)) {
        callback()
    } else {
        callback(new Error("请输入正确的手机号"))
    }
}
// 定义验证码的校验方法
function validatorCode(_rule: any, value: any, callback: any) {
    if (/^\d{6}$/.test(value)) {
        callback()
    } else {
        callback(new Error("验证码应为 6 位数字"))
    }
}
// 监听场景的数据
watch(() => phoneFlag.value, () => {
    if (!phoneFlag.value) {
        userStore.queryState()
    }
})

</script>

<style scoped lang="scss">
.login_container {

    // 深度选择器
    :deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .login {
        border: 1px solid #ccc;
        padding: 20px;

        .wechat {
            display: flex;
            flex-direction: column;
            // 侧轴居中
            align-items: center;

            .changePhone {
                display: flex;
                flex-direction: column;
                // 侧轴居中
                align-items: center;

                p {
                    margin-bottom: 10px;
                }
            }
        }

        .bottom {
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                cursor: default;
                margin: 10px 0;
            }
        }
    }

    .right {
        display: flex;
        flex-direction: column;

        .top {
            display: flex;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                line-height: 20px;

                img {
                    width: 80%;
                }
            }
        }

        .content {
            margin-top: 10px;
            line-height: 50px;
            font-size: larger;

            p {
                text-align: center;
            }

        }
    }
}
</style>